<template>
	<view class="main u-page">
		<view class="head">
			<view class="head_box">
				<view class="job_box">
					<view class="u-page__tag-item">
						<u-search
							v-model="form.keyword"
							:show-action="false"
							shape="square"
							@change="getPositionList"
						></u-search>
					</view>
				</view>
				<view class="tag_box">
					<text class="label_item">按标签搜索：</text>
					<text v-for="(item,index) in label" :key="index" @click="setWelfare(item)">{{item}}</text>
				</view>
				<view class="tag_box" style="display: flex;">
					<view style="margin-right: 20rpx;display: flex;align-items: center;">
						<picker @change="educationSelect" :range="educationlist">
							<view class="picker">{{form.education || "搜学历"}}</view>
						</picker>
					</view>
					<view style="margin-right: 20rpx;display: flex;align-items: center;">
						<picker @change="workSelect" :range="worklist">
							<view class="picker">{{form.work_y || "搜经验"}}</view>
						</picker>
					</view>
					<view style="display: flex;align-items: center;">
						<uni-data-picker 
						:placeholder="regiondata || '搜城市'"
						popup-title="请选择城市" 
						:localdata="cityitems"
						:step-searh="true" 
						@change="regionchange" 
						@nodeclick="onnodeclick" />
					</view>
				</view>
			</view>
		</view>
		<view class="main_content">
			<block v-for="(item,index) in list">
				<view class="company_box">
					<view class="company_item_box" @click="goto('/resume/entdetails?id='+item.en_id)">
						<view class="company_name">
							<view style="font-size: 42rpx;">{{item.position ? item.position :''}}</view>
							<view style="margin-left:20rpx;margin-top:10rpx;color: #777777;">
								{{item.salary_low}}-{{item.salary_hei}}
							</view>
							<!-- {{item.ent_name || ""}} -->
						</view>
						<!-- <view class="company_job">
							地址：
							{{item.address ? item.address :''}}
						</view> -->
						<view class="company_job" v-if="item.salary_low">
							{{item.work_y ? item.work_y :''}}经验 - {{item.education ? item.education :''}} - {{item.sex ? item.sex :''}}
						</view>
						<view class="company_job" v-if="item.skill">
							技能：{{item.skill ? item.skill :''}}
						</view>
						<view class="company_job" v-if="item.remark">
							福利：{{item.remark}}
						</view>
					</view>
					<view class="company_logo">
						<view class="company_logo_item">
							<image :src="imgURL + item.logo"></image>
						</view>	
						<view style="margin-top: 10rpx;color: #777777;font-size: 12rpx;">
						{{item.city_name ? item.city_name :''}}
						{{item.create_time ? showTime(item.create_time) :''}}
						</view>
						
					</view>
				</view>
			</block>
		</view>
		<u-modal
			title="邀请面试"
			:show="yaoqingModal"
			showCancelButton
			asyncClose
			@confirm="yaoqingconfirm"
			@cancel="() => showModal = false"
		>
			<u--form
				labelPosition="left"
				:model="form"
				ref="form"
			>
				<u-form-item
					label="邀请职位"
					prop="education"
					borderBottom
					labelWidth="80"
					@click="showPicker(index)"
				>
					<u--input
						v-model="yaoqingform.position_name"
						border="none"
						placeholder="职位名称"
					></u--input>
					<u-icon
						slot="right"
						name="arrow-right"
					></u-icon>
				</u-form-item>
				<u-form-item
					label="面试时间"
					prop="interview_time"
					labelWidth="80"
					@click="showDatetimePicker"
				>
					<u--input
						v-model="yaoqingform.interview_date"
						border="none"
						placeholder="面试时间"
					></u--input>
				</u-form-item>
			</u--form>
		</u-modal>
		<u-datetime-picker
			:show="timeshow"
			v-model="form.interview_date"
			mode="datetime"
			closeOnClickOverlay
			@confirm="timeconfirm"
			@cancel="timecancel"
			@close="timeclose"
		></u-datetime-picker>
		<u-picker
			:show="showposition"
			:columns="positionList"
			keyName="position"
			@cancel="positioncancel"
			@confirm="positionconfirm"
		></u-picker>
		<Tabbar :count="100"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from "@/components/Tabbar"
	import { formatTime } from '@/utils/utils'
	import { imgURL } from '@/utils/config'
	import { getResumeList } from '@/api/resume.js'
	import { getPositionList } from '@/api/position.js'
	import { savedelivery } from '@/api/user.js'
	import { getTree } from '@/api/area.js'
	
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				imgURL:imgURL,
				yaoqingModal:false,
				showposition:false,
				timeshow:false,
				list: [],
				label:['应届生','就职人才'],
				educationlist:['小学','初中','中专','高中','大专','本科','硕士','博士',],
				worklist:['应届生','1-3年','3-5年'],
				cityitems:[],
				regiondata: '',
				form:{
					page:1,
					pagesize:20,
					total:0,
					keyword:'',
					work_y:'',
					education:'',
					city:''
				},
				yaoqingform:{
					uid:'',
					position_id:'',
					position_name:'',
					interview_time:'',
					interview_date:''
				},
				positionList:[],
				defaultIndex:[[]]
			}
		},
		onLoad() {
			this.getTreelist()
			this.getPositionList()
		},
		methods: {
			setWelfare(item){
				this.form.keyword = item
				this.getPositionList()
			},
			//获取信息
			getPositionList() {
				getPositionList(this.form).then(res=>{
					if(res.code == 200){
						this.list = res.data.data
						this.form.total = res.data.total
					}
					else{
						return uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},
			
			//邀请弹窗
			openmodel(index) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要申请当前岗位吗？',
					success: function (res) {
						if (res.confirm) {
							let data = that.list[index]
							savedelivery(data).then(res=>{
									uni.showToast({
										icon: 'none',
										title: res.msg
									});
							})
						} 
						else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//打开显示时间并格式化默认显示时间
			showTime(v) {
				var arr= v.split(" ");
				var date=arr[0].split("-");
				var date2=arr[1].split(":");
				let d = date[1]+"-"+date[2]+" "+date2[0]+":"+date2[1];
				return d
			},
			//提交邀请
			yaoqingconfirm(){
				this.yaoqingModal = false
			},
			
			//选择职位
			PickerChange(e){
				let index = e.detail.value
				this.form.fieldname = this.catelist[index].job_cate_name
				this.form.field = this.catelist[index].job_cate_id
			},
			//showPicker
			showPicker(){
				this.showposition = true
			},
			positionclose() {
				this.showposition = false
			},
			positionconfirm(e) {
				this.showposition = false
				this.yaoqingform.position_name = e.value[0].position
				this.yaoqingform.position_id = e.value[0].position_id
			},
			positioncancel() {
				this.showposition = false
			},
			//时间弹窗关闭
			timeclose() {
				this.timeshow = false
			},
			//开启时间弹窗
			showDatetimePicker() {
				this.timeshow = true
			},
			timecancel() {
				this.timeshow = false
			},
			timeconfirm(e) {
				this.timeshow = false
				this.yaoqingform.interview_time = e.value/1000
				const timeFormat = uni.$u.timeFormat
				this.yaoqingform.interview_date = timeFormat(e.value, 'yyyy-mm-dd hh:MM')

			},
			getTreelist(){
				getTree().then(res=>{
					if(res.code == 200){
						this.cityitems = res.data
					}
				})
			},
			
			regionchange(e) {
				this.form.page= 1
				this.form.pagesize=20
				this.form.total = 0
				this.list = []
				const value = e.detail.value
				this.form.city = value[1].value
				this.regiondata = value[0].text + ',' + value[1].text
				this.getPositionList()
			},
			
			onnodeclick(e) {
				console.log(e)
			},
			//搜学历
			educationSelect(e){
				this.form.page= 1
				this.form.pagesize=20
				this.form.total = 0
				this.list = []
				const index = e.detail.value
				this.form.education = this.educationlist[index]
			
				this.getPositionList()
			},
			workSelect(e){
				this.form={
					page:1,
					pagesize:20,
					total:0,
				}
				this.list = []
				const index = e.detail.value
				this.form.work_y = this.worklist[index]
				this.getPositionList()
			},
			goto(tourl) {
				uni.navigateTo({
					url: tourl
				});
			}
		},
	}
</script>

<style lang="scss">
	/deep/.placeholder{
		font-size: 30rpx !important;
		color: #fff !important;
	}
	/deep/ .input-value-border{border: none !important;color: #fff !important;}
	/deep/ .text-color{color: #fff !important;}
	.picker{
		font-size: 28rpx !important;
	}
	.head{
		background-image: url('');
		background-repeat:no-repeat;
		background-attachment:fixed;
		background-size:cover;
		width: 100%;
		height: 400rpx;
		display: block;
		image{
			width: 100%;
			height: 100%;
		}
		.head_box{
			padding-top: 30rpx;
			width: 100%;
			.job_box{
				margin: 0 40rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 48rpx;
				color: #fff;
				text{
					color: #43e4f8;
				}
			}
			.tag_box{
				margin: 0 60rpx;
				height:80rpx;
				line-height: 80rpx;
				color: #fff;
				font-size: 26rpx;
				.label_item{
					color: #43e4f8;
				}
				text{margin-right: 10rpx;}
			}
		}
	}
	.main_content{
		margin-top: -100rpx;
		.company_box{
			border-radius: 10rpx;
			background-color: #f9f9f9;
			display: flex;
			justify-content: space-between;
			margin: 20rpx;
			padding: 20rpx;
			font-size: 28rpx;
			color: #000;
			.company_logo{
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;
				margin-left: 20rpx;
				.jsob_yao_item{
					border: 1px solid #f3f3f3;
					background-color: #fff;
					font-size: 28rpx;
					margin-top: 20rpx;
					padding: 10rpx;
					width: 100%;
					text-align: center;
				}
				.company_logo_item{
				width:160rpx; 
				height:160rpx;
				border: #fcfcfc 5px solid;
					image{
						max-width: 100% !important;
						max-height: 100% !important;
					}
				}
			}
			.company_item_box{
				width: 500rpx;
				.company_name{
					display: flex;
					width: 500rpx;
					font-size: 34rpx;
					height: 60rpx;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
				}
				.company_handle{
					margin: 20rpx;
					.handle_shenqin{
						width: 200rpx;
						line-height: 60rpx;
					}
				}
				
				.company_job,.company_addr,.company_salary{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					height: 50rpx;
					width: 450rpx;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
					color: #777777;
				}
				.company_intro{
					line-height: 50rpx;
					color: #777777;
					margin-bottom: 20rpx;
				}
			}
		}
	}
	.foot{
		background-color: #000;
	}
	
</style>